import { Suspense, useState } from 'react';
import './App.css';
import { MyProvider } from './Provider.tsx';
import { AsyncComponent } from '@/ModuleOne/AsyncComponent.lazy';
import { StaticComponent } from '@/StaticComponent';

function App() {
  const [count, setCount] = useState(0);

  return (
    <MyProvider>
      <Suspense fallback={<div>Loading...</div>}>
        {count % 5 > 2 && <AsyncComponent />}
        {count % 10 > 2 && <AsyncComponent />}
      </Suspense>

      <StaticComponent />
      <h1>Vite + React</h1>
      <div className="card">
        Перерисовка всего приложения для проверки корректности работы
        монтирования и размонтирования редюсера
        <button onClick={() => setCount(count => count + 1)}>
          count is {count}
        </button>
      </div>
    </MyProvider>
  );
}

export default App;
